/*
 * @Author: wu07 1732042133@qq.com
 * @Date: 2023-02-22 15:26:39
 * @LastEditors: wu07 1732042133@qq.com
 * @LastEditTime: 2023-02-22 16:15:40
 * @FilePath: \悦旅\JoyTravel\travel\src\component\tab\tab.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React from 'react'
import '../css/tab.css'
import { NavBar, TabBar } from 'antd-mobile'
import {
    Route,
    useNavigate,
    useLocation,
    MemoryRouter as Router,
} from 'react-router-dom'
import {
    AppOutline,
    UserOutline,
    UnorderedListOutline,
    MessageOutline,
    MovieOutline
} from 'antd-mobile-icons'
export default function Tab() {
    const navigate = useNavigate()
    const location = useLocation()
    const { pathname } = location

    const setRouteActive = (value: string) => {
        navigate(value)
    }
    const tabs = [
        {
            key: '/index',
            title: '首页',
            icon: <AppOutline />,
        },
        {
            key: '/square',
            title: '广场',
            icon: <UnorderedListOutline />,
        },
        {
            key: '/video',
            title: '视频',
            icon: <MovieOutline />,
        },
        {
            key: '/message',
            title: '消息',
            icon: <MessageOutline />,
        },
        {
            key: '/me',
            title: '我的',
            icon: <UserOutline />,
        }
    ]
    return (
        <TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
            {tabs.map(item => (
                <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
            ))}
        </TabBar>
    )
}
